<template>
  <view class="com-container" v-if="props.show">
    <view class="login-box">
      <image
        class="logo"
        :lazy-load="true"
        :src="`${proxy.$baseUrl.imageUrl}/A/system/logo.png`"
        mode="widthFix"
      />
      <view class="title">您还未登录</view>
      <view class="tips">请先登录之后再进行操作</view>
      <view class="btn-box">
        <view class="login" @click="login" hover-class="login-press"
          >立即登录</view
        >
      </view>
    </view>
    <view class="close-box" @click="close()">
      <view class="line"></view>
      <view class="close">
        <text class="nb_icon icon_close"></text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, defineProps } from "vue";
import { signUp, sign, updateUser } from "@/apis/member.ts";
const props = defineProps({
  show: { type: Boolean, default: false },
});
const data = reactive({
  show: false,
});
const emit = defineEmits(["refreshLogin"]);
const login = () => {
  data.show = false;
  let userInfo: any = {};
  uni.getUserProfile({
    desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res: any) => {
      updateUser(res.userInfo).then((updateRes: any) => {
        uni.setStorageSync("userinfo", updateRes.data);
        emit("refreshLogin");
      });
    },
  });
};
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.com-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: 0.6);
  z-index: 9;
  .login-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500rpx;
    height: 500rpx;
    background: #ffffff;
    font-family: Source Han Sans CN;
    .logo {
      width: 120rpx;
      height: 120rpx;
    }
    .title {
      margin-top: 20rpx;
      font-size: 42rpx;
      font-weight: bold;
      color: #000000;
    }
    .tips {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
    }
    .btn-box {
      margin-top: 30rpx;
      display: flex;
      .login {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 460rpx;
        height: 68rpx;
        background: var(--main-color);
        font-size: 28rpx;
        font-weight: 500;
        color: #fff;
        &.login-press {
          background-color: #164784;
        }
      }
    }
  }
  .close-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .line {
      width: 1px;
      height: 40rpx;
      background-color: #fff;
    }
    .close {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 1px solid #fff;
      .icon_close {
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
}
</style>
